function $(id){
  return document.getElementById(id);
}
//队列
const queue = {
  list:[90,10, 11, 15, 20, 66, 91, 93,88, 9 ],
  leftAdd:function(it){
    if(this.list.length == 60){
      alert('已经满了，最多60个'); 
      return;
    }
    this.list.unshift(it);
    this.init();
  },
  leftDel:function(){
    if(this.list.length<1){
      alert('请先添加数字');
      return;
    }
    alert('您要删除的是左边第一个：' + this.list[0]);
    this.list.shift();
    this.init();
  },
  rightAdd:function(it){
    if(this.list.length == 60){
      alert('已经满了，最多60个'); 
      return;
    }
   this.list.push(it);
   this.init();
  },
  rightDel:function(){
    if(this.list.length<1){
      alert('请先添加数字');
      return;
    }
   let i= this.list.length -1;
   alert('您要删除的是右边第一个：' + this.list[i]);
   this.list.pop();
   this.init();
  },
  clickDel:function(e){
    let i = this.list.indexOf(e);
    this.list.splice(i,1);
    this.render();
  },
  render:function(){
    let html = '';
    let width = 1000 / (this.list.length * 2);
    this.list.forEach(item => {
      html += `<div style="margin:0 ${width/2}px;background:red;width:${width}px;text-align:center;float:left;color:#ffffff;height:${item*5}px;">${item}</div>`
    });
    $('content').innerHTML = html;
  },
  bubble:function(){
    for(let i=0;i<this.list.length-1;i++){
       for(let k=0;k<this.list.length -1-i ;k++){
          if(this.list[k]>this.list[k+1]){
             let temp = this.list[k];
             this.list[k] = this.list[k+1];
             this.list[k+1] = temp;    
          }
       }
    }
    this.render()
  },
  showBubble:function(){
    let buttons = $('content').getElementsByTagName('div');
    let i=buttons.length -1,j=0,timer=null,temp=null,dely=20;
    
    timer = setInterval(() => {
        if(i == 0){
          console.log('删除了');
          clearInterval(timer);
        }
        if(i == j){//循环完一次 j 归零
          i--;
          j =0;
        }
        console.log(buttons[j].offsetHeight)
        if(buttons[j].offsetHeight > buttons[j+1].offsetHeight){
          temp =  buttons[j].offsetHeight;
          buttons[j].style.height = buttons[j+1].offsetHeight + 'px';
          buttons[j].innerHTML = buttons[j+1].offsetHeight;
          buttons[j+1].style.height = temp + 'px';
          buttons[j+1].innerHTML = temp;
        }
        j++;
      }, dely);         
  },
  insertNumber:function(){
     this.list = [];
     for(let i=0;i<30;i++){
       let num = Math.floor(Math.random() * 90 + 10);
       this.list.push(num);
     }
     this.render();
  },
  init:function(){
    this.render();
  }
}
// 4个按钮点击事件
function btnClick(e){
    if(e.target.nodeName.toLowerCase() == 'button'){
      let val = Number($('textNum').value.trim());
      switch(e.target.innerText){
       case '左侧入':
        if(!val){
          alert('输入不能为空');
          return;
        }
        queue.leftAdd(val);
       break;
       case '左侧出':
        queue.leftDel();
       break;
       case '右侧入':
        if(!val){
          alert('输入不能为空');
          return;
        }
        queue.rightAdd(val);
       break;
       case '右侧出':
        queue.rightDel(val);
       break;
       case '冒泡排序':
         queue.bubble();
       break;
       case '可视化冒泡':
        queue.showBubble();
      break;
      case '随机插入30个':
        queue.insertNumber();
      break;
      }
    }
}
// 点击数字删除
function numClick(e){
    if(e.target.nodeName.toLowerCase() == 'div'){
        queue.clickDel(e.target.innerText);
    }
} 
$('btn').addEventListener('click',btnClick,false);
$('content').addEventListener('click',numClick,false);
queue.init();